<template>
	<view class="bg-white" style="height: 100vh; width: 100vw;">
		<scroll-view scroll-y="true" style="height: 100%;width: 100%;">
			<cu-custom bgColor="bg-white" :isBack="true">
				<block slot="content">
					<text style="font-size: 32rpx;">期刊</text>
				</block>
			</cu-custom>
			<view style="margin-top: 16rpx; padding: 0 32rpx; font-size: 40rpx; font-weight: bold; color: #1C1C1E; line-height: 48rpx;">
				{{journal.subTitle}}
			</view>
			<view style="margin-top: 32rpx; padding: 0 32rpx;font-size: 28rpx; color: #999999; line-height: 40rpx;">
				东北林业大学 | {{authorName}}
			</view>
			<view style="margin-top: 48rpx; padding: 0 32rpx;">
				<rich-text :nodes="journal.content" style="font-size: 32rpx;line-height: 64rpx;"></rich-text>
			</view>
			<comment class="margin-left margin-right" v-if="showComment" :comment-list="commentList" type-name="期刊" @publish="handlePublish"></comment>
			<!-- 底部占位区 -->
			<view style="width: 100%;height: 120rpx;"></view>
			<view class="flex solid-top bg-white" style="width: 100%;height: 120rpx;position: fixed;bottom: 0;">
				<!-- 评论 -->
				<view class="flex-sub flex flex-direction  align-center margin-top-sm">
					<text @click="toggleMask('show')" class="text-black cuIcon-comment " style="font-size: 50rpx;"></text>
					<text>{{commentList.length}}</text>
				</view>
				<!-- 收藏 -->
				<view class="flex-sub  flex flex-direction  align-center margin-top-sm">
					<text :class="[isLike?' text-blue cuIcon-appreciatefill':'text-black cuIcon-appreciate']" @click="like()" style="font-size: 50rpx;"></text>
					<text>{{journal.likeCount}}</text>
				</view>
				<!-- 点赞 -->
				<view class="flex-sub  flex flex-direction  align-center margin-top-sm">
					<text :class="[isFavorite?' text-blue cuIcon-likefill':'text-black cuIcon-like']" @click="favorite()" style="font-size: 50rpx;"></text>
					<text>{{journal.favoriteCount}}</text>
				</view>
			</view>
		</scroll-view>
		<ygc-comment ref="ygcComment"
		    :placeholder="'发布评论'" 
			@pubComment="pubComment">
		</ygc-comment>
		

		</scroll-view> 
	</view>
</template>

<script>
	const TypeJournal = '3';
	import comment from '../../components/comment/comment.vue';
	import ygcComment from '../../components/comment/ygc-comment.vue';
	import articleApi from '../../api/articleApi.js';
	import popup from '../../components/uni-popup/uni-popup.vue';
	import popupShare from '../../components/share-btn/share-btn.vue';
	export default {
		components:{
			comment,
			ygcComment,
			popup,
			popupShare
		},
		data() {
			return {
				journalSubjectId: this.$Route.query.journalSubjectId,
				journal: {},
				user: {},
				authorName: '',
				// isFollow: false,		//暂无关注作者
				isFavorite:false,
				isLike:false,
	
				showComment: false,
				constantID: "0000000000000000000",
				targetComment: {},
				commentList: [],
			}
		},
		onLoad() {
			if(!this.journalSubjectId || this.journalSubjectId==''){
				this.journalSubjectId = '1234';
			}
			this.user.id = this.$store.getters.userid;
			this.$http.get('/edu/journal/getJournalDetail/' + this.journalSubjectId + '/' + this.user.id).then(res=>{
				let data = res.data;
				console.log(data)
				if(data.success) {
					this.journal = data.result;
					this.authorName = data.result.authorName.join('; ');
					this.isLike = data.result.isLike;
					this.isFavorite = data.result.isFavorite;
				}else {
					console.log("data fail")
					console.log(data.message)
				}
			}).catch((err) => {
				console.log(err);
			})
			
			this.targetComment = {};
			articleApi.getArticleComment([this.journalSubjectId, TypeJournal]).then(res=>{
				this.commentList = res.data;
				this.showComment = true;
			})
		},
		methods: {
			toggleMask(type) {
				this.$refs.ygcComment.toggleMask(type);
			},
			handlePublish: function(item) {
				this.targetComment = item;
				this.toggleMask("show");
			},
			pubComment(commentContent) {
				this.$refs.ygcComment.toggleMask();
				this.$refs.ygcComment.content = '';
				let constantID = this.constantID;
				//向后端添加评论
				let comment = {
					userId: this.user.id,
					parentCommentId: JSON.stringify(this.targetComment) == "{}" ? constantID: (this.targetComment.parentCommentId==constantID?this.targetComment.commentId:this.targetComment.parentCommentId),
					targetCommentId: JSON.stringify(this.targetComment) == "{}" ? constantID: (this.targetComment.parentCommentId==constantID?constantID:this.targetComment.commentId),
					targetUserId: JSON.stringify(this.targetComment) == "{}" ? '' : (this.targetComment.parentCommentId==constantID?'':this.targetComment.userId),
					contentId: this.journalSubjectId,
					columnType: TypeJournal,
					content: commentContent
				}
				articleApi.addComment(comment).then(res=>{
					this.$tip.success('评论成功!');
					this.$Router.replace({name: 'journalDetail', params:{journalSubjectId: this.journalSubjectId}})
				})
			},
			like(){
				this.isLike=!this.isLike
				if(this.isLike){	//点赞
					this.journal.likeCount++;
					this.$http.post('/edu/like/likeContent', 
					{
						contentId: this.journalSubjectId,
						userId: this.user.id,
						columnType: TypeJournal
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)
						}
					}).catch(err => {
						console.log(err);
					});
				} else{	//取消点赞
					this.journal.likeCount--;
					this.$http.post('/edu/like/dislikeContent',
					{
						contentId: this.journalSubjectId,
						userId: this.user.id,
						columnType: TypeJournal
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)
						}
					}).catch(err => {
						console.log(err);
					});
				}
			},
			favorite(){
				this.isFavorite = !this.isFavorite;
				if(this.isFavorite){	//收藏
					this.journal.favoriteCount++;
					this.$http.post('/edu/favorite/favoriteContent', 
					{
						contentId: this.journalSubjectId,
						userId: this.user.id,
						columnType: TypeJournal
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)
						}
					}).catch(err => {
						console.log(err);
					});
				} else{	//取消收藏
					this.journal.favoriteCount--;
					this.$http.post('/edu/favorite/unfavoriteContent',
					{
						contentId: this.journalSubjectId,
						userId: this.user.id,
						columnType: TypeJournal
					}).then(res=>{
						let data =  res.data;
						if(data.success){
							this.$tip.success(data.message)
						}
					}).catch(err => {
						console.log(err);
					});
				}
			},
		}
	}
</script>

<style>
</style>
